<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>神奇的海螺~</title>
        <link rel="stylesheet" type="text/css" href="https://www.layuicdn.com/layui-v2.5.6/css/layui.css" />
        <style>
            body * {
                padding: 9px;
            }
        </style>
    </head>
    <body style="padding: 20px;">
        <script type="text/javascript" src="https://www.layuicdn.com/layui-v2.5.6/layui.js"></script>
        <div style="text-align: center;">
            <h1>一个神奇的海螺<a href="/lab/">(实验室首页)</a></h1>
        </div>
        <p>这是什么?</p>
        <p style="padding-left: 15px;">一个神奇的海螺~~~</p>
        <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" onclick="question()">问一问神奇的海螺</button>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/jquery/jquery@3.5.0/dist/jquery.min.js" async></script>
        <script src="https://cdn.jsdelivr.net/gh/shangzhenyang/periodic-table/periodictable.min.js" async></script>
        <script type="text/javascript">
            layui.use('layer', function() {});
            function question() {
                if(!window.$ || !window.elements) {
                    layui.layer.alert("加载未完成, 尝试等待或刷新");
                } else {
                    switch(randomNumber(0, 1)) {
                        case 0:
                        case 1:
                            var exp = '';
                            for(;randomNumber(0, 2) == 1 || exp == '';) {
                                var el = randomFromList(elements);
                                exp += el.symbol;
                                if(randomNumber(0, 3) != 1) {
                                    exp += randomNumber(2, 10);
                                }
                            }
                            var comp = getCompound(exp);
                            showResult(`化学方程式 ${exp} 的相对原子质量是 ${comp.mass}${comp.name_chs ? ", 也就是" + comp.name_chs : ""}`);
                    }
                    
                }
            }
            function showResult(result) {
                layui.layer.open({
                    title: "你知道吗?",
                    content: result,
                    anim: 1
                });
            }
            function randomNumber(min, max) {
                return Math.floor(Math.random() * (max - min + 1) + min); 
            }
            function randomFromList(list) {
                return list[randomNumber(0, list.length - 1)];
            }
        </script>
    </body>
</html>